<template>
  <div>
    <div class="box-card">
      <div class="box-header">
        <el-form :model="form" label-width="80px">
          <el-row :gutter="10">
            <el-col :span="7">
              <el-form-item label="目录名称">
                <el-input v-model="form.directoryName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="状态">
                <el-select placeholder="请选择" v-model="form.state">
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-button class="header-btn" @click="clearInput">清空</el-button>
              <el-button type="primary" class="header-btn" @click="searchInput"
                >搜索</el-button
              >
            </el-col>
            <el-col :span="3" style="margin-top: 8px" v-if='$route.query.id'>
                <el-link style="color:#409eff" @click="$router.push('/subjects/list')"><i class="el-icon-back"></i>返回学科 </el-link>
            </el-col>
            <el-col :span="2" style="margin-left: -10px">
              <el-button
                type="success"
                class="header-right"
                @click="openDialog('add')"
                ><i class="el-icon-edit"></i> 新增目录</el-button
              >
            </el-col>
          </el-row>
        </el-form>

        <div class="header-content">
          <i class="el-icon-info"></i>
          <span>共{{ total }}条记录</span>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#f4f4f5' }"
      >
        <el-table-column prop="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="150px">
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            <span>{{ row.state ? '已启用' : '已禁止' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template #default="{ row }">
            <el-button
              type="text"
              v-if="!row.state"
              @click="changeStates('use', row)"
              >启用</el-button
            >
            <el-button type="text" v-else @click="changeStates('no', row)"
              >禁用</el-button
            >
            <el-button
              type="text"
              @click="openDialog('edit', row)"
              :disabled="row.state ? true : false"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="open(row)"
              :disabled="row.state ? true : false"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pagesize"
        :total="total"
        layout="prev,pager, next,sizes, jumper"
      >
      </el-pagination>
    </div>
    <!-- 弹出框 -->
    <el-dialog
      :title="diologTitle"
      :visible.sync="dialogFormVisible"
      @close="closeDialog"
      width="40%"
    >
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="所属学科" label-width="80px" prop="subjectID">
          <el-select v-model="form.subjectID" placeholder="请选择">
            <el-option
              v-for="item in subject"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName" label-width="80px">
          <el-input
            v-model="form.directoryName"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="addOrUpdataData">确定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  remove,
  add,
  update,
  detail,
  changeState
} from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects.js'
export default {
  components: {},
  data () {
    return {
      input: '',
      tableData: [],
      page: 1,
      pagesize: 10,
      total: 0,
      form: {
        directoryName: '',
        subjectID: '',
        state: null
      },
      rules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ],
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'change' }
        ]
      },
      dialogFormVisible: false,
      titleType: 'add',
      id: '',
      subject: '',
      datas: null
    }
  },

  async created () {
    this.initTable()
    // 所属学科
    const { data } = await simple()
    console.log(data)
    this.subject = data
  },

  methods: {
    // 清空表单内容
    clearForm () {
      this.form = {
        directoryName: null,
        subjectID: null,
        state: null
      }
    },
    async initTable () {
      console.log(this.$route.query.id)
      if (this.$route.query.id) {
        const { data } = await list({
          page: this.page,
          pagesize: this.pagesize,
          directoryName: this.form.directoryName,
          subjectID: this.$route.query.id
        })
        this.datas = data
        console.log(data)
      } else {
        const { data } = await list({
          page: this.page,
          pagesize: this.pagesize,
          directoryName: this.form.directoryName,
          state: this.form.state
        })
        this.datas = data
        console.log(data)
      }

      this.datas.items = this.datas.items.map((item, index) => {
        const obj = { index: index + 1 }
        item = { ...obj, ...item }
        item.addDate = this.$moment(item.addDate).format('YYYY-MM-DD hh:mm:ss')
        return item
      })
      this.tableData = this.datas.items
      this.total = this.datas.counts
    },
    // pagesize改变时
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.initTable()
    },
    // page改变时
    handleCurrentChange (val) {
      this.page = val
      this.initTable()
    },
    // 清空input
    clearInput () {
      this.clearForm()
      this.initTable()
    },
    // 搜索input
    searchInput () {
      this.initTable()
    },
    // 对话框取消按钮
    closeDialog () {
      this.clearForm()
      this.$refs.form.resetFields()
      this.dialogFormVisible = false
    },

    // 点击新增用户按钮
    async openDialog (type, row) {
      this.titleType = type
      if (type === 'edit') {
        const { data } = await detail(row)
        console.log(data)
        this.form.directoryName = data.directoryName
        this.form.subjectID = data.subjectID
        this.id = data.id
      }
      this.dialogFormVisible = true
    },

    // 删除 取消确认按钮
    open (row) {
      this.$confirm('此操作将永久删除改目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 发删除请求
          await remove(row)
          this.initTable()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作！'
          })
        })
    },
    // 新增和修改
    async addOrUpdataData () {
      try {
        this.$refs.form.validate()
        if (this.titleType === 'add') {
          console.log(1)
          const data = await add(this.form)
          console.log(data)
        } else if (this.titleType === 'edit') {
          console.log(2)
          const data = await update({ id: this.id, ...this.form })
          console.log(data)
        }
        this.closeDialog()
        this.initTable()
        this.$message.success(
          this.titleType === 'add' ? '添加成功' : '修改成功'
        )
        this.dialogFormVisible = false
      } catch (error) {
        this.$message.error('请填入必填项')
      }
    },
    // 启用 禁用
    async changeStates (type, row) {
      console.log(2)
      if (type === 'use') {
        console.log(1)
        row.state = 1
        const data = await changeState(row)
        console.log(data)
        this.initTable()
      }
      if (type === 'no') {
        row.state = 0
        await changeState(row)
        this.initTable()
      }
    }
  },
  computed: {
    diologTitle () {
      if (this.titleType === 'add') return '新增目录'
      if (this.titleType === 'edit') return '修改目录'
      else return 'add'
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 20px;
  background-color: #fff;
  padding: 20px;
  .header-content {
    background-color: #f4f4f5;
    color: #909399;
    font-size: 13px;
    padding-left: 8px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    .el-icon-info {
      margin-right: 5px;
    }
  }
}
.edit1 {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  &:hover {
    background-color: #409eff;
    color: #fff;
  }
}
.edit2 {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
  &:hover {
    background-color: #f56c6c;
    color: #fff;
  }
}
.edit3 {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
  &:hover {
    background-color: #e6a23c;
    color: #fff;
  }
}
.edit4 {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
}
.el-pagination {
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 20px;
}

.el-dialog {
  .el-form {
    width: 400px;
    margin: auto;
    .el-input {
      width: 310px;
      height: 35px;
    }
    .el-select {
      width: 310px;
      height: 35px;
    }
  }
  .dialog-footer {
    margin-top: 60px;
    position: relative;
    left: 230px;
  }
}
</style>
